<template>
	 <view class="tab-bar">
	    <view
	      v-for="(item, index) in tabs"
	      :key="index"
	      class="tab-item"
	      :class="{ active: currentIndex === index }"
	      @click="switchTab(index)"
	    >
	      <text>{{ item.text }}</text>
	    </view>
		</view>
</template>

<script>
	import {abnormal} from '@/api/abnormal.js';
	import axios from '@/util/http'
	export default {
		data() {
			return {
				 currentIndex: 0,
				      tabs: [
				        { text: '全部' },
				        { text: '未预约'},
						{ text: '已预约' },
						{ text: '已完结' },
				        // 添加更多 Tab
				      ],
				items: [
					
				],
				status:0,
				req:{
					contactInformation:'',
					beginTime:'',
					endTime:''
				}
			}
		},
		props: {
			 telephone: {
				 type: String,
				 required: true
			 }
		    },
		methods: {
			switchTab(index) {
			      this.currentIndex = index;
				  console.log(this.telephone)
				  //全部
				  if(this.currentIndex==0){
					  this.req.status=0
					  this.req.contactInformation=this.telephone
						uni.showLoading({
													        title: '加载中'
													  })
					  abnormal(this.req).then(res =>{
					  	this.items=res.data.data
							uni.hideLoading()
						this.$emit('update:data', { currentIndex: this.currentIndex,items: [...this.items]  });
					  }).catch((error) => {
							uni.hideLoading()
					  });
				  }
				  //未预约
				  if(this.currentIndex===1){
					  this.status=1
					   const queryParams = {
					                  contactInformation: this.telephone, // 示例参数，根据实际需求调整
					                  status: this.status, // 示例参数，根据实际需求调整
					                  // 可以添加更多参数...
					              };
												uni.showLoading({
																			        title: '加载中'
																			  })
					  abnormal(queryParams).then(res =>{
					  	this.items=res.data.data
							uni.hideLoading()
						this.$emit('update:data', { currentIndex: this.currentIndex,items: [...this.items]  });
					  }).catch((error) => {
							uni.hideLoading()
						   console.error('Error fetching appointment:', error);
					  });
				  }
				  //已预约
				  if(this.currentIndex===2){
				  		this.status=2
				  		 const queryParams = {
				  		                contactInformation: this.telephone, // 示例参数，根据实际需求调整
				  		                status: this.status, // 示例参数，根据实际需求调整
				  		                // 可以添加更多参数...
				  		            };
							uni.showLoading({
														        title: '加载中'
														  })
				  		abnormal(queryParams).then(res =>{
				  			this.items=res.data.data
								uni.hideLoading()
							this.$emit('update:data', { currentIndex: this.currentIndex,items: [...this.items]  });
				  		}).catch((error) => {
								uni.hideLoading()
				  		   console.error('Error fetching appointment:', error);
				  		});
				  }
				  //已完结
				  if(this.currentIndex===3){
				  		this.status=3
				  		 const queryParams = {
				  		                contactInformation: this.telephone, // 示例参数，根据实际需求调整
				  		                status: this.status, // 示例参数，根据实际需求调整
				  		                // 可以添加更多参数...
				  		            };
							uni.showLoading({
														        title: '加载中'
														  })
				  		abnormal(queryParams).then(res =>{
				  			this.items=res.data.data
								uni.hideLoading()
				  							this.$emit('update:data', { currentIndex: this.currentIndex,items: [...this.items]  });
				  		}).catch((error) => {
								uni.hideLoading()
				  		   console.error('Error fetching appointment:', error);
				  		});
				  }
				  // 触发自定义事件，并传递数据
				  console.log(this.items)
				
			    },
		}
	}
</script>

<style>
@import "abnormalNarBar.css";
</style>
